// 播放列表样式
.play-list {
  // width: 100%;
  flex: 1;

  // 统一格式化table样式
  &>>>.el-table {
    // 字体颜色
    color: #cbcbcb;
    width: 100%;

    // 修改高度
    height: 520px !important;
    max-height: 520px !important;
    background: transparent;

    // 去除表格底线
    &::before {
      background-color: transparent;
    }

    // 高亮当前播放歌曲
    .el-table__body .high-light {
      color: #fff;
      font-weight: bold;
    }

    .el-table__body-wrapper {
      max-height: 520px !important;
    }

    // 单元格背景色
    th,
    tr {
      background-color: #fff0;
    }

    // 表头下划线
    th {
      // 表头字体样式
      color: #cbcbcb;
      font-weight: initial;

      &.is-leaf {
        border-bottom: 1px solid rgba(150, 150, 150, 0.1);
      }
    }

    // 鼠标滑入背景色
    tr:hover>td {
      background: #ffffff12;

      // 显示歌曲操作图标
      .option-btn {
        display: inline;
        opacity: 1;
      }
    }

    // 下划线样式
    td {
      border-bottom: 1px solid rgba(150, 150, 150, 0.1);

      // 调整歌曲来源图标在单元格中垂直居中
      .cell {
        display: flex;
        align-items: center;
      }
    }

    // 歌曲操作图标样式
    .option-btn {
      margin-right: 10px;
      opacity: 0;
      transition: 0.2s;
      cursor: pointer;

      &:hover {
        color: #fff;
      }

      // 播放按钮
      &:nth-child(1) {
        font-size: 22px !important;
      }

      // 收藏按钮
      &:nth-child(2) {
        font-size: 23px !important;
        margin-top: 1px;
      }

      // 删除按钮
      &:nth-child(3) {
        font-size: 20px !important;
      }
    }

    // 歌曲来源图标大小
    .source-icon {
      width: 28px;
      height: 28px;
    }

    // 编辑按钮样式
    .editor-btn {
      color: #cbcbcb6b;
      font-size: 17px;
      border: none;
      background: transparent;

      padding-left: 0;

      &:hover {
        color: #fff;
      }

      // 编辑图标
      &.editor {
        font-size: 18px;
      }

      // 删除图标
      &.delete {
        margin-left: -7px;
        padding-right: 40px;
        font-size: 19px;
      }
    }

    // 多选框样式
    .el-table-column--selection {

      // 消除选框右移
      .cell {
        padding-left: 0;
        padding-right: 0;
        display: flex;
        align-items: center;
      }

      // 重新设置选框样式
      .el-checkbox {
        // width: 18px;
        // height: 18px;
        overflow: hidden;

        .el-checkbox__inner {
          // display: none;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: transparent;
          border-color: #cbcbcb6b;
          border-width: 2px;

          // 全选框文字位置
          &::before {
            top: 7px;
          }

          // 普通选框文字位置
          &::after {
            height: 9px;
            left: 6px;
          }
        }
      }

      // 选中样式
      .el-checkbox__input.is-checked .el-checkbox__inner {
        background: #fff;
      }
    }

    // 列表为空时，提示文字
    .el-table__empty-text {
      color: #cbcbcb;
    }

    .el-table__empty-block {
      height: 53px !important;
    }
  }
}
